<template>
    <el-card>
        <template #header>
            <div>
                <el-form ref="searchFormRef" :model="searchForm" label-width="120px">
                    <el-row :gutter="10">
                        <el-col :span="6">
                            <el-form-item label="列车id">
                                <el-input-number v-model="searchForm.trainId" placeholder="请输入" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="车次">
                                <el-input v-model="searchForm.trainNumber" placeholder="支持模糊搜索" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="列车类型">
                                <el-select v-model="searchForm.type" placeholder="请选择" clearable>
                                    <el-option label="普通" value="0" />
                                    <el-option label="特快" value="1" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="列车状态">
                                <el-select v-model="searchForm.status" placeholder="请选择" clearable>
                                    <el-option label="禁用" value="0" />
                                    <el-option label="启用" value="1" />
                                    <el-option label="维修" value="2" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="10">
                        <el-col :span="6">
                            <el-form-item label="发车时间开始">
                                <el-date-picker v-model="searchForm.startTimeStart" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="发车时间结束">
                                <el-date-picker v-model="searchForm.startTimeEnd" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="停车时间开始">
                                <el-date-picker v-model="searchForm.stopTimeStart" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="停车时间结束">
                                <el-date-picker v-model="searchForm.stopTimeEnd" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择"/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="10">
                        <el-col :span="6">
                            <el-form-item label="商务座数量最少">
                                <el-input-number v-model="searchForm.businessNumStart" :min="0" :step="4" step-strictly/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="商务座数量最多">
                                <el-input-number v-model="searchForm.businessNumEnd" :min="0" :step="4" step-strictly/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="普通座数量最少">
                                <el-input-number v-model="searchForm.commonNumStart" :min="0" :step="6" step-strictly/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="普通座数量最多">
                                <el-input-number v-model="searchForm.commonNumEnd" :min="0" :step="6" step-strictly/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col style="margin-left: 950px;">
                            <el-button type="primary" @click="clearSearchForm">清空</el-button>
                            <el-button type="primary" @click="loadDataList">查询</el-button>
                            <el-button type="primary"
                                @click="router.push({ name: 'trainCreateOrUpdate' })">新增</el-button>
                                <el-button type="primary" @click="exportExcel">导出</el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </template>
        <Table :columns="columns" :fetch="loadDataList" :dataSource="tableData" :options="tableOptions">
            <!-- 表单列插槽插入 -->
            <!-- 列车id -->
            <template #slotTrainId="{index,row}">
                {{ row.trainId }}
            </template>
            <!-- 车次 -->
            <template #slotTrainNumber="{index,row}">
                {{ row.trainNumber }}
            </template>
            <!-- 列车类型 -->
            <template #slotType="{index,row}">
                <div>{{ row.type == 0 ? "普通":"特快" }}</div>
            </template>
            <!-- 发车时间 -->
            <template #slotStartTime="{index,row}">
                {{ row.startTime }}
            </template>
            <!-- 停车时间 -->
            <template #slotStopTime="{index,row}">
                {{ row.stopTime }}
            </template>
            <!-- 商务座数量 -->
            <template #slotBusinessNum="{index,row}">
                {{ row.businessNum }}
            </template>
            <!-- 普通座数量 -->
            <template #slotCommonNum="{index,row}">
                {{ row.commonNum }}
            </template>
            <!-- 状态 -->
            <template #slotStatus="{index,row}">
                <div v-if="row.status===0" style="color: #F56C6C;">禁用</div>
                <div v-else-if="row.status===1" style="color: #67C23A;">启用</div>
                <div v-else-if="row.status===2" style="color: #E6A23C;">维修</div>
            </template>
            <!-- 操作 -->
            <template #slotOperation="{index,row}">
                <el-link type="primary"
                    @click="router.push({name:'trainCreateOrUpdate',query:{row:JSON.stringify(row)}})"
                    style="margin-right: 20px">编辑</el-link>
                <el-link type="danger" @click="deleteTrain(row,true)">删除</el-link>
            </template>
        </Table>
    </el-card>
</template>

<script setup>
    import {ref,getCurrentInstance,onMounted} from 'vue';
    import {useRouter} from 'vue-router';
    import Table from "@/components/Table.vue";

    const {proxy} = getCurrentInstance();
    // 路由
    const router = useRouter();
    // 表单样式
    const tableOptions = {
        showIndex: true,
        border: true,
    }
    // 表单
    const tableData = ref({});
    // 表单列
    const columns = [
        {
            label: "列车id",
            prop: "trainId",
            width: "200",
            scopedSlots: "slotTrainId",
            fixed: false,
        },
        {
            label: "车次",
            prop: "trainNumber",
            width: "200",
            scopedSlots: "slotTrainNumber",
            fixed: false,
        },
        {
            label: "列车类型",
            prop: "type",
            width: "100",
            scopedSlots: "slotType",
            fixed: false,
        },
        {
            label: "发车时间",
            prop: "startTime",
            width: "200",
            scopedSlots: "slotStartTime",
            fixed: false,
        },
        {
            label: "停车时间",
            prop: "stopTime",
            width: "200",
            scopedSlots: "slotStopTime",
            fixed: false,
        },
        {
            label: "商务座数量",
            prop: "businessNum",
            width: "100",
            scopedSlots: "slotBusinessNum",
            fixed: false,
        },
        {
            label: "普通座数量",
            prop: "commonNum",
            width: "100",
            scopedSlots: "slotCommonNum",
            fixed: false,
        },
        {
            label: "状态",
            prop: "status",
            width: "100",
            scopedSlots: "slotStatus",
            fixed: false,
        },
        {
            label: "操作",
            prop: "operation",
            width: "200",
            scopedSlots: "slotOperation",
            fixed: "right",
        }
    ]
// 查询表单
const searchForm = ref({});

/**
 * 获取数据
 */
const loadDataList = async ()=>{
    let params = {
        pageNo: tableData.value.pageNo,
        pageSize: tableData.value.pageSize,
    };
    Object.assign(params,searchForm.value);
    if(!params.startTimeStart || params.startTimeStart.length == 0){
        delete params.startTimeStart;
    }
    if(!params.startTimeEnd || params.startTimeEnd.length == 0){
        delete params.startTimeEnd;
    }
    if(!params.stopTimeStart || params.stopTimeStart.length == 0){
        delete params.stopTimeStart;
    }
    if(!params.stopTimeEnd || params.stopTimeEnd.length == 0){
        delete params.stopTimeEnd;
    }
    let result = await proxy.Request.request({
        url: proxy.Api.loadTrainList,
        params: params,
    });
    if(!result){
        return;
    }
    Object.assign(tableData.value,result.data);
}
/**
 * 删除列车
 */
const deleteTrain = async (row,needConfirm=false)=>{
    if(needConfirm){
        proxy.Confirm({
            message: "确定要删除列车吗？",
            okfun: ()=>deleteTrain(row,false)
        });
        return;
    }
    let result = await proxy.Request.request({
        url: proxy.Api.deleteTrain,
        params: {
            trainId: row.trainId
        }
    });
    if(!result){
        return;
    }
    proxy.Message.success("删除成功");
    loadDataList();
}
/**
 * 清空搜索表单
 */
const clearSearchForm = ()=>{
    searchForm.value = {};
}
/**
 * 导出数据
 */
 const exportExcel = async (row,needConfirm=false)=>{
    if(needConfirm){
        proxy.Confirm({
            message: "确定要导出数据吗？",
            okfun: ()=>exportExcel(row,false)
        });
        return;
    }
    const orderList = (tableData.value.list || []).map((item) => item);
    if (orderList.length === 0) {
        proxy.Message.warning("当前没有可导出的列车数据");
        return;
    }
    let result = await proxy.Request.requestJSON({
        url: proxy.Api.exportTrainExcel,
        params: orderList, 
        responseType: 'arraybuffer'
    });
    if(!result){
        return;
    }
    let blob = new Blob([result.data], { type: 'application/vnd.ms-excel' });
    const fileName = "列车数据excel.xlsx";
    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveBlob(blob, fileName);
    } else {
        const link = document.createElement('a');
        link.style.display = 'none';
        var href = URL.createObjectURL(blob);
        link.href = href;
        link.setAttribute('download', fileName);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        window.URL.revokeObjectURL(href);
    }
    proxy.Message.success("导出成功");
}
onMounted(()=>{
    loadDataList();
})

</script>

<style scoped>
.el-card {
    width: auto;
}

.el-form {
    .el-form-item {
        width: 300px;
    }
    .el-input-number{
        width: 180px;
    }
}
</style>